<template>
  <div>
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-main>

        <div>
          <el-carousel :interval="4000" type="card" height="400px">
            <el-carousel-item v-for="(img,index) in img" :key="index">
              <h3 class="medium">
                <el-image :src="require('@/'+img.src)" fit="contain" style="width: 940px;height: 400px"></el-image>
              </h3>
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 推荐院校 -->
        <el-row>
          <el-col :span="20" :offset="3" style="margin-top: 20px; ">
            <div style="border-bottom: rgb(151,185,222) 1px solid; margin-bottom: 10px; margin-right: 200px; margin-top: 50px">
              <span class="yxtuijian">院校推荐</span><span class="loi">山东 {{users.type}} {{users.score}} {{users.ranks}}</span></div>
            <el-card style="padding-bottom: 20px;width: 90%">
              <el-col :span="18" :offset="3">
                <el-row>
                  <el-col :span="6" v-for="college in fourColleges" :key="college.id">
                    <div @click="goMain(college.id)"><img :src="college.logo" class="schoolimg"></div>
                    <div class="schoolName">{{ college.name }}</div>
                    <div class="schoolRegion">{{college.region}}</div>
                  </el-col>
                </el-row>
              </el-col>
            </el-card>
          </el-col>
        </el-row>

        <!-- 热门资讯 -->
        <el-row>
          <el-col :span="20" :offset=3 style="margin-top: 20px">
            <div style="border-bottom: rgb(151,185,222) 1px solid; margin-bottom: 10px; margin-right: 200px; margin-top: 50px">
              <span class="yxtuijian">热门资讯</span><span class="rmzxr"></span></div>
            <el-card style="padding-bottom: 20px;width: 90%">
              <div class="tuiguang1">
                <span><img src="../assets/img/tuijian1.png" class="tuijian"></span>
                <span class="rmzxleixing">政策速递</span>
                <span><a href="https://storage-oss.ipin.com/oss-data/article202110111414054212624.html">山东省医学生公费教育实施办法</a></span>
                <span class="tuiDate">2021-10-11</span>
              </div>
              <div class="tuiguang1">
                <span><img src="../assets/img/rmzx2.jpg" class="tuijian"></span>
                <span class="rmzxleixing">开学路径</span>
                <span><a href="https://storage-oss.ipin.com/oss-data/article202110081140375812620.html">探索拔尖人才培养的中国方案</a></span>
                <span class="tuiDate">2021-10-9</span>
              </div>
              <div class="tuiguang1">
                <span><img src="../assets/img/rmzu3.jpg" class="tuijian"></span>
                <span class="rmzxleixing">专业解读</span>
                <span><a href="https://storage-oss.ipin.com/oss-data/article202110081135247622619.html">数学: 自然科学之基础</a></span>
                <span class="tuiDate">2021-10-11</span>
              </div>
              <div class="tuiguang1">
                <span><img src="../assets/img/rmzx4.jpg" class="tuijian"></span>
                <span class="rmzxleixing">专业解读</span>
                <span><a href="https://storage-oss.ipin.com/oss-data/article202110081134063042618.html">信息与计算科学：“数学+计算机”挖掘数据开发新高地</a></span>
                <span class="tuiDate">2021-10-8</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>
        <Footer></Footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import Header from "../components/Header";
  import Footer from "../components/Footer";
    export default {
        name: "Index",
        components:{
            Header,
            Footer,
        },
        data(){
            return{
              img: [
                {
                  src:'assets/img/banner.png'
                },
                {
                  src:'assets/img/banner.png'
                },
                {
                  src:'assets/img/banner.png'
                },
              ],

                users:{
                  name:'',
                  region:'山东省',
                  type:'',
                  score:'',
                  rank:''
                },
                showGroup:false,
                role:'',
                fourColleges:[]
            }
        },
        methods:{

          goMain(collegeId){
            this.$router.push({
              path: '/university/'+collegeId
            });
          },
          getFour(){
            this.$axios.get("http://localhost:8080/colleges/queryFourAllColleges").then((res)=>{
              this.fourColleges = res.data;
            })
          },
          getUsersRoleById(){
              //这个bug为什么突然好了?? 我改了哪里????
              this.$axios.get("http://localhost:8080/users/getUsersRoleById?id="+window.localStorage.getItem("userid").toString())
                  //这个地方 我不知道为啥 如果参数是 this.users.id 那就是 undefined, 只能这样
                  .then((res)=>{
                      // console.log("返回值是 "+res.data)
                      // console.log(this.users)
                      if(res.data===1) {
                          // console.log("此处res.data===1")
                          this.role = "administrator";
                          // console.log("经过赋值 this.role 是 "+this.role.toString())
                      }else {this.role = "user";}
                      window.localStorage.setItem("role",this.role)
                  })
          },
          findUserById(id){
            this.$axios.get("http://localhost:8080/users/getUsersById?id="+id).then((res)=>{
              console.log(res.data)
              this.users = res.data;
            });
          },
          toAdmin(){
              if(window.localStorage.getItem("role") === 'administrator') location.href='admin/user.html';
              else alert("非管理员 无授权进入管理员界面!")
          }
        },
        created(){
          if(window.localStorage.getItem("online")!=="off"){
            this.getUsersRoleById();
            console.log("用户当前状态为 在线")
            console.log("用户角色是 "+window.localStorage.getItem("role"))
            console.log("用户id是 "+window.localStorage.getItem("userid"))
            this.getFour();
            this.findUserById(window.localStorage.getItem("userid").toString());
          }else {
            console.log("用户当前状态为 离线 强制退出")
            this.$router.push({
              path: '/login'
            })
          }
        }
    }
</script>

<style scoped>

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
  .el-main{
    margin-top: 70px;
  }

  .yxtuijian{
    border-left: rgb(23, 100, 182) 5px solid;
    padding-left: 20px;
    font-size: 2em;
  }

  .schoolimg{
    width: 120px;
    margin-left: 35px;
  }

  .schoolName{
    text-align: center;
  }

  .schoolRegion{
    text-align: center;
  }

  .tuiguang1{
    margin: 10px;
    border-bottom: 1px solid rgb(218, 218, 218);
    padding-bottom:20px ;
  }

  .tuijian{
    width: 180px;
  }

  .rmzxleixing{
    margin-left: 20px;
    margin-right: 20px;
    color: rgb(115, 115, 235);
  }

  .tuiDate{
    margin-top: 50px;
    font-size: 0.5em;
    color: gray;
  }

  .loi{
    margin-left: 50px;
    /* font-size: 25px; */
  }

  .tuiDate{
    float: right;
  }

  a{
    text-decoration: unset;
  }

  .self{
    width: 270px;
  }
  .selfLine{
    line-height: 40px;
    text-align: center;
  }
</style>
